<template>
    <el-table :data="data" :row-key="props.rowKey" stripe border style="width: 100%">
        <el-table-column v-for="(item, index) in props.tableColumn" :label="$t(item.label)" :width="item.width">
            <template #default="scope">
                <span v-if="item.type === 'text'">{{ scope.row[item.prop] }}</span>
                <template v-if="item.type === 'buttons'">
                    <el-button v-for="(list, index) in item.children" :type="list.type" :size="list.size" :link="list.link" :disabled="list.disabled" @click="list.click(scope.row)">
                        {{ $t(list.label) }}
                    </el-button>
                </template>
                <template v-if="item.type === 'star'">
                    <el-icon color="#F54347" size="20" v-for="item in 5"><StarFilled /></el-icon>
                </template>
            </template>
        </el-table-column>
    </el-table>
</template>
<script setup lang="ts">
interface Column {
    label: string; // 列标题
    prop: string; // 列属性
    width?: string; // 列宽度
    type?: string; // 列类型
    children?: any; // 按钮组
    rowKey?: any; // 表格主键
}
interface Props {
    data: any; // 表格数据
    size?: string; // 表格大小
    tableColumn?: Column; // 表格列
    rowKey?: any; // 表格主键
}
const props = withDefaults(defineProps<Props>(), {
    data: () => [], // 提供一个空的 Item[] 数组作为默认值
    size: "default",
});
// console.log(props.data);
</script>
